<template>
    <div class="create-order">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                訂單預覽
            </template>
        </nav-bar>
        <div class="address-wrap">
            <div class="name" @click="goTo">
                <span>{{ address.name }}</span>
                <span>{{ address.phone }}</span>
            </div>
            <div class="address">
                    {{ address.province }} {{ address.city }} {{ address.county }} {{ address.address }}
            </div>
            <van-icon class="arrow" name="arrow"/>
        </div>

        <div class="good">
            <div class="good-item" v-for="(item,index) in cartList" :key="index">
                <div class="good-img">
                    <img v-lazy="item.goods.cover_url" alt=""/>
                </div>
                <div class="good-desc">
                    <div class="good-title">
                        <span>{{ item.goods.title }}</span>
                        <span>{{ item.num }}</span>
                    </div>
                    <div class="good-btn">
                        <div class="price"><small>￥</small>{{ item.goods.price+".00" }}</div>
                    </div>
                </div>
                <van-submit-bar :price="total * 100" button-text="提交订单" @submit="handleCreateOrder" class="submit-all" />
                
                <van-popup
                    closeable
                    :close-on-click-overlay="false"
                    v-model:show="showPay"
                    position="bottom"
                    :style="{height: '30%'}"
                >
                    <h3 class="zifhu">選擇支付方式</h3>
                    <van-radio-group v-model="checked">
                        <van-cell-group inset>
                            <van-cell title="微信支付" clicktable @click="checked = '1'">
                                <template #icon>
                                    <van-icon class="iconw" :name="wxicon"/>
                                </template>
                                <template #right-icon>
                                    <van-radio name="1"/>
                                </template>
                            </van-cell>
                            <van-cell title="支付包支付" clicktable @click="checked = '2'">
                                <template #icon>
                                    <van-icon class="iconw" :name="zfbicon"/>
                                </template>
                                <template #right-icon>
                                    <van-radio name="2"/>
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>
                    <van-button @click="topay(checked)" style="width: 100%;" type="danger">
                        <span>{{ checked=='1' ? '使用微信支付': '使用支付包支付' }}</span>
                    </van-button>
                </van-popup>
            </div>
        </div>
    </div>
</template>
<style>
.create-order{
    background: #f9f9f9;
}
.address-wrap{
    text-align: left;
    margin-bottom:20px;
    background:#fff;
    position:relative;
    margin-top:44px;
    font-size:14px;
    padding:15px;
    color:#222333;
}
.name .address{
    margin:10px 0;
}
.arrow{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
}
.arrow::before{
    position: absolute;
    right:0;
    left:0;
    bottom:0;
    height:2px;
    background:-webkit-repeating-linear-gradient(135deg,#ff6c6c 0,#ff6c6c 20%,transparent 25%,#1989fa 0);
    background: repeating-linear-gradient(-45deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa);
    background-size:80px;
    content:'';
}
.good{
    margin-bottom:120px;
}
.good-item{
    padding:10px;
    background:#fff;
    display:flex;
}
.good-item img{
    width:100px;
    height:auto;
}
.good-desc{
    display:flex;
    flex-direction:colunm;
    justify-content:space-between;
    flex:1;
    padding:20px;
}
.good-title{
    display:flex;
    justify-content:space-between;

}
.price{
    font-size:16px;
    color:red;
    line-height:28px;
}
.van-icon-delete{
    font-size:20px;
    margin-top:4px;
}
.pay-wrap{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    padding:10px 0;
    padding-bottom:50px;
    border-top:1px solid #e9e9e9;
}
.pay-wrap div{
    display: flex;
    justify-content:space-between;
    padding: 0 5%;
    margin:10px 0;
    font-size: 14px;
}
.pay-wrap div span:nth-child(2){
    color: red;
    font-size: 18px;
}
pay-btn{
    position: fixed;
    bottom:7px;
    right:0;
    left:0;
    width:90%;
    margin:0 auto;
}
.submit-all{
    margin-bottom:100px;
    z-index: 9 !important;

}
h3{
    font-size: 14px;
    padding:15px;
    margin-top: 10px;

}
.van-radio-group{
    margin-top: 10px;
}
.van-icon_image{
    width: 25px;
    height: 25px;
}
</style>
<script>
import { ref,reactive,onMounted,toRefs,computed } from "vue";
import NavBar from "@/components/common/NavBar/NavBar.vue";
import { getOrderPreview,createOrder } from "@/network/order";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default({
    components:{
        NavBar
    },
    setup(){
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            cartList:[],
            address:{},
            showPay:false,
            orderNo:'',//訂單
            wxicon:require('@/assets/images/wx.jpg'),
            zfbicon:require('@/assets/images/zfb.jpg')
        })
        const checked = ref('1');
        const init = ()=>{
            Toast.loading({message:'加載中...',forbidClick:true});
            getOrderPreview().then(res=>{
                console.log(res);
                let address = res.address.filter(n=>n.is_default == '1');

                // filter()：淺備份
                console.log(address);
                if(address.length== 0){
                    state.address = {
                        address:'還沒有設置默認地址,請選擇或填寫地址'
                        
                    }
                }else{
                        state.address = address[0];
                        console.log(address[0]);
                    }
                    state.cartList = res.carts;
                 console.log(res.carts);
               
                 
                    Toast.clear()
                    // clear:關閉提示

            })
        }
        onMounted(()=>{
            init()
            // 初始化
        })
        const goTo = () =>{
            router.push({path:'/address'})
        }
        console.log(goTo);
      const handleCreateOrder=()=>{
        const params = {
            address_id:state.address.id
        }
        createOrder(params).then(res=>{
            // console.log(res);
            Toast('创建成功');
            store.dispatch('updateCar');
            state.showPay=true;
            state.orderNo = res.id;
        })
      }
       const total = computed(()=>{
        let sum =0;
        state.cartList.forEach(item=>{
            sum +=parseInt(item.num) * parseFloat(item.goods.price);
         })
         return sum;
       })
        const topay = (checked) => {
            let types =['','wechat','aliyun']
            router.push({path:'/paytest',query:{type:types[checked],orderid:state.orderNo}})
        }
        return {
                ...toRefs(state),
                topay,
               handleCreateOrder,
                goTo,
                checked,
                total
        }
    }
  
})
</script>
<!-- wrap:包裹 province:省 county:縣 arrow:箭頭 cart:推車 lazy:懶 cover:封面 submit:提交 handle:處理
overlay:覆蓋 cell:單元格 inset:插入 danger:危險 relative:親戚 direction:方向 column:纵队 require:要求
dispatch:發送 total parse:分析
-->